<template>
    <CommonPage  :flowId="flowId" >
        <div class="app-container">
            <LitigationApplicationOrder :info="form" />
            <LitigationApplicationLitigation :info="form" /> 
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>申请信息</span>
                    <span></span>
                </div>
                <el-descriptions title="" :column=2> 
                    <el-descriptions-item label="变更诉讼原因">
                        {{ form.proceedReason|filterNull }}
                    </el-descriptions-item>
                    <el-descriptions-item label="修改前累计未结清费用">
                        {{ format_thousand(form.oldAllNoPayoffCost) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="附件上传" >
                        <div class="flex">
                            <ImageCommon disabled v-model="form.changeFile" :up-type="2" info="选择附件" :limit="20"></ImageCommon>
                        </div>
                    </el-descriptions-item>
                </el-descriptions>    
            </div>
            <!-- 合同期内已生成账单未结清费用--修改 -->
            <div class="card-wrap flex-column justify-end card-padding">
                    <div class="card-title-wrap">
                        <span>合同期内已生成账单未结清费用--修改</span>
                        <span></span>   
                    </div>
                    <div v-for="(item,index) in form.changeVoBillList" :key="item.id">
                        <div class="title_box">
                            <div>
                                <span class="title_text">车牌号:{{ item.carCode }}</span>    
                            </div>
                        </div>
                        <el-table fit :data="item.changeVoBillList" border style="margin-top:10px;margin-bottom: 10px;" >
                            <el-table-column prop="periodsNum" label="期数"  align="center" ></el-table-column>
                            <el-table-column prop="costTypeStr" label="费用类型"  align="center" > </el-table-column>
                            <el-table-column prop="oldCost" label="修改前费用(元)" align="center">
                                <template slot-scope="scope">
                                    <span>{{ format_thousand(scope.row.oldCost) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="cost" label="修改后费用(元)" align="center">
                                <template slot-scope="scope">
                                    <span>{{ format_thousand(scope.row.cost) }}</span>
                                </template>
                            </el-table-column> 
                            
                        </el-table>
                </div>
                    
            </div>
            <!-- 合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改 -->
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改</span>
                    <span></span>   
                </div>
                <div v-for="(item,index) in newFessList" :key="item.id">
                    <div class="title_box">
                        <div>
                            <span class="title_text">车牌号:{{ item.carCode }}</span>
                        </div>
                    </div>
                    <el-table fit :data="item.definitionList" border style="margin-top:10px;margin-bottom: 10px;" >
                        <el-table-column prop="costType" label="费用类型"  align="center" > </el-table-column>
                        <el-table-column prop="cost" label="修改前费用(元)" align="center">
                            <template slot-scope="scope">
                                <span>{{ format_thousand(scope.row.cost) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="changeAmount" label="修改后费用(元)" align="center">
                            <template slot-scope="scope">
                                <span>{{ format_thousand(scope.row.changeAmount) }}</span>
                            </template>
                        </el-table-column> 
                    </el-table>
                
                </div>
                
            </div>
            <!-- 合同期内或合同期外未还车发生诉讼产生的未结清费用--新费用项 -->
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>合同期内或合同期外未还车发生诉讼产生的未结清费用--新费用项</span>
                    <span></span>   
                </div>
                <div v-for="(item,index) in newFessList1" :key="item.id">
                    <div class="title_box">
                        <div>
                            <span class="title_text">车牌号:{{ item.carCode }}</span>
                        </div>
                    </div>
                    <el-table fit :data="item.definitionList" border style="margin-top:10px;margin-bottom: 10px;" >
                        <el-table-column prop="costType" label="费用项类型" align="center"></el-table-column> 
                        <el-table-column prop="cost" label="费用金额(元)" align="center">
                            <template slot-scope="scope">
                                <span>{{ format_thousand(scope.row.cost) }}</span>
                            </template>
                        </el-table-column> 
                    </el-table>
                
                </div>
                
            </div>
            <!-- 其他未结清费用-现费用项修改 -->
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>其他未结清费用-现费用项修改</span>
                    <span></span>
                </div>
                    <el-table fit :data="form.changeCostOtherListEdit" border style="margin-top:10px;margin-bottom: 10px;" >
                        <el-table-column prop="costTypeStr" label="费用类型"  align="center" ></el-table-column>
                        <el-table-column prop="oldCost" label="修改前费用(元)" align="center">
                            <template slot-scope="scope">
                                <span>{{ format_thousand(scope.row.oldCost) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="cost" label="修改后费用(元)" align="center">
                            <template slot-scope="scope">
                                <span>{{ format_thousand(scope.row.cost) }}</span>
                            </template>
                        </el-table-column> 
                    </el-table>
            </div>
            <!-- 其他未结清费用-新费用项 -->
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>其他未结清费用-新费用项</span>
                    <span></span>
                </div>
                <el-table fit :data="form.changeCostOtherListEditAdd" border style="margin-top:10px;margin-bottom: 10px;" >
                    <el-table-column prop="costTypeStr" label="费用类型"  align="center" ></el-table-column>
                    <el-table-column prop="cost" label="费用金额(元)" align="center">
                        <template slot-scope="scope">
                            <span>{{ format_thousand(scope.row.cost) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="file" label="附件" align="center">
                        <template v-slot="{row}">
                            <ImageCommon  info="" :up-type="2" :limit="20" v-model="row.file" disabled></ImageCommon>
                        </template>  
                    </el-table-column> 
                </el-table>
            </div>   
        </div>
    </CommonPage>
   
</template>

<script>

import LitigationApplicationOrder from '@/views/collectionManagement/litigationApplication/compoent/order.vue'
import LitigationApplicationLitigation from '@/views/collectionManagement/litigationApplication/compoent/litigation.vue'
import * as apis from "@/api/collectionManagement/litigationApplication.js";
import { watch } from 'vue-demi';
export default {
    name: "IitigationInfo",
    components: {LitigationApplicationOrder,LitigationApplicationLitigation},
    dicts: [ 'progress_litigation'],
    data() {
        return {
            status:1,
            form:{
                carBasicVo:'1779677725229084674'
            },
            newFessList:[
             {
                carCode:null,
                definitionList:[],
                id:new Date().getTime()

            }
            ],
            newFessList1:[
             {
                carCode:null,
                definitionList:[],
                id:new Date().getTime()

                }
            ],
            info:{
                order:{

                },
                litigation:{

                }
            },
            flowId:'',
            state:'write',
        };
    },
    async created(){
        this.getInfo()
    },
    watch:{
        newFessList:{
            deep:true,
            handler(val){
                this.newFessList = val
            }
        },
        newFessList1:{
            deep:true,
            handler(val){
                this.newFessList1 = val
            }
        },
    },
    methods: {
          // 获取所有信息
          getInfo(){
                apis.changeLitigationInfo(this.$route.query?.id).then((res)=>{
                    if(res.code==200){
                        this.form = res.data
                        this.flowId = res.data?.flowId
                        if(res.data?.id){
                            this.state=true
                        }else{
                            this.state=false
                        }
                        this.newFessList = res?.data?.overdueChangeOldJson?res?.data?.overdueChangeOldJson:[]
                        this.newFessList1 = res?.data?.overdueChangeNewJson?res?.data?.overdueChangeNewJson:[]
                        let list = res?.data?.overdueChangeOldJson?res?.data?.overdueChangeOldJson:[]
                        // let list1 = JSON.parse(JSON.stringify(list))
                        // list1?.map((res)=>{
                        //     res?.definitionList?.map((item)=>{
                        //         if(item.changeAmount && item.changeAmount !==''){
                        //             this.$set(item,'cost',item.changeAmount)
                        //         }
                        //     })
                        // })
                        // this.newFessList = list1
                    }
                })
            },
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 10px;
    width: 70%;
}

::v-deep .el-tabs__item {
    font-size: 16px !important;
    //color: #333333;
    font-weight: bold;
}

::v-deep .el-descriptions__header {
    margin-top: -8px !important;
    margin-bottom: 10px !important;
}
</style>
